<template>
  <div>
    <el-form label-width="120px" :model="appointForm">
        <div style="margin:20px;">
          <div style="display:flex;justify-content:space-between;">
            <span v-for="(item,index) in week" :key="index" :class="{'top_style':item.is_active==0,'top_active':item.is_active==1}" @click="changWeek(item,index)">
              <div style="height:25px;line-height:20px;">{{item.month}}-{{item.date}}</div>
              <div style="height:25px;line-height:20px;">{{item.day}}</div>
            </span>
          </div>
          <div style="display:flex;margin:20px 50px;font-size:18px;justify-content:space-between;">
            <div style="display:flex;"><div style="background-color:#C8C9CC;width:40px;height:20px;margin-right:10px;"></div><div>不可预约</div></div>
            <div style="display:flex;"><div style="background-color:#ffa4a4;width:40px;height:20px;margin-right:10px;"></div><div>已有预约</div></div>
            <div style="display:flex;"><div style="background-color:#3EA7F1;width:40px;height:20px;margin-right:10px;"></div><div>当前预约</div></div>
          </div>
          <div style="margin:20px 50px;height:250px" class="button_wrap">
            <el-button v-for="(item,index) in timeArr" :key="index" @click="changTime(item,index)" :type="item.status==0?'':item.status==1?'danger':item.status==2?'info':'primary'" :disabled="item.status==1||item.status==2" class="button_style">{{item.time}}</el-button>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="备注：">
              <el-input placeholder="请输入" v-model="remark" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
        <el-button @click="closeAppoint">取消</el-button>
  </div>

    
</template>

<script>
import {time} from '@/utils/time'
export default {
    data(){
        return{
            isAppoint:true,
            appointAreaId:"",
            appointAreaName:"",
            positionId:"",
            positionName:"",
            week:[],
            dateNow:"",
            appointTimeArr:[],
            timeArr:time(),
            timeStart:"",
            timeEnd:""

        }
    },
    created(){
      console.log(time())
        this.addAppoint()
        this.getAppoint()
        this.getAppointed()
        this.dealTime()
        this.changWeek()
        this.changTime()
        this.closeAppoint()
    },
    methods:{
        //预约
    addAppoint(val){
      this.isAppoint=true;
      this.appointAreaId=val.appointAreaId;
      this.appointAreaName=val.appointAreaName;
      this.positionId=val.positionId;
      this.positionName=val.positionName;
      this.getAppoint();
      let formData={
        appointAreaId:val.appointAreaId,
        startTime:this.getYMD(new Date())+' '+'00:00:00',
        endTime:this.getYMD(new Date())+' '+'23:59:59'
      }
      this.getAppointed(formData);
    },
    //每次打开预约弹窗时，默认选中当天
    getAppoint(){
      let arr = []
      for (let i = 0; i < 7; i++) {
        arr.push(this.dealTime(i))
      }
      arr[0].is_active=1;
      this.week=arr;
      this.dateNow=this.week[0].full;
    },
    //获取时间数组
    getAppointed(formData){
      appointTime(formData).then(res=>{
        this.timeArr=res.data.data;
        if(res.data.code==200){
          this.timeArr=res.data.data;
        }
      })
    },
    }
}
</script>

<style scoped>
.top_style,.top_active{
  border:1px solid #AAA;
  padding:3px 20px;
  text-align:center;
}
.top_active{
  border-color:#02A7F0;
  color: #02A7F0;
}
.button_style{
  text-align:center;
  float:left;
  width: 80px;
}
</style>